<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .text::first-letter{
            color: red;
        }
        .text::first-line{
            color: red;
        }
        span::first-line{
            color: red;
        }
        /* ::first-line只作用于块级元素。 */
        .text::selection{
            color: green;
        }

        .text::before{
            content: "小滴课堂";
        }
        /* 可以在开头添加内容而非标签。 */
        .text::after{
            content: "小滴课堂";
        }
    </style>
</head>
<body>
    <div class="text">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit tempora sed totam! Itaque laboriosam commodi esse recusandae doloribus rerum culpa laudantium id alias! Numquam perspiciatis dicta laudantium eaque repudiandae doloribus sint quidem assumenda rem commodi. Optio accusantium repudiandae, officia distinctio tempore odit molestiae sunt necessitatibus fugiat ea accusamus facilis consequatur omnis autem, impedit aspernatur dolorum. Tempore inventore temporibus voluptatem molestias, vero optio adipisci ut corporis iste tempora est quae, fugit exercitationem voluptatibus excepturi autem illum perferendis? Quae consequuntur eaque ratione quod sequi iste. Velit quasi voluptatem ullam! Maxime, error. Maxime debitis amet molestias quae accusamus maiores dignissimos illum enim labore rerum, soluta nulla nesciunt. Vero at illum dicta temporibus atque soluta quia consequuntur sint, fugiat corporis quisquam repellendus accusantium quibusdam earum laudantium, voluptate tempora? Nihil delectus odio recusandae soluta quas aperiam facere deleniti ad dolore fugiat, saepe aliquid laborum. Officia soluta explicabo dolorem molestiae maxime repellendus perspiciatis ab delectus eum quasi similique nesciunt odio illo, natus vero exercitationem laborum voluptate! Voluptatum quasi, repellat odit autem illum explicabo enim voluptas. In optio perferendis beatae totam sed? Deserunt, non? Labore alias consequuntur qui at doloremque, iusto sint distinctio accusamus, adipisci, placeat error odio. Esse perferendis odio unde est voluptate quo praesentium facilis.
    </div>
    <br>
    <span>
        https://xdclass.net/
    </span>
</body>
</html>

<!-- ::first-letter 表示第一个。
::first-line 表示第一行。
::selection 表示选中。
::before 在开始位置。
::after 在结束位置。 -->